import React from 'react';
import { Navigation, MapPin, Smartphone } from 'lucide-react';

interface NavigationLinksProps {
  startPoint: {
    name: string;
    lat: number;
    lng: number;
  };
  endPoint: {
    name: string;
    lat: number;
    lng: number;
  };
  className?: string;
}

const NavigationLinks: React.FC<NavigationLinksProps> = ({
  startPoint,
  endPoint,
  className = ''
}) => {
  // 生成高德地图导航链接
  const generateAmapLink = () => {
    const amapUrl = `amapuri://route/plan/?slat=${startPoint.lat}&slon=${startPoint.lng}&sname=${encodeURIComponent(startPoint.name)}&dlat=${endPoint.lat}&dlon=${endPoint.lng}&dname=${encodeURIComponent(endPoint.name)}&dev=0&t=0`;
    return amapUrl;
  };

  // 生成百度地图导航链接
  const generateBaiduLink = () => {
    const baiduUrl = `baidumap://map/direction?origin=${startPoint.lat},${startPoint.lng}|name:${encodeURIComponent(startPoint.name)}&destination=${endPoint.lat},${endPoint.lng}|name:${encodeURIComponent(endPoint.name)}&mode=transit`;
    return baiduUrl;
  };

  // 生成苹果地图导航链接
  const generateAppleLink = () => {
    const appleUrl = `maps://maps.apple.com/?saddr=${startPoint.lat},${startPoint.lng}&daddr=${endPoint.lat},${endPoint.lng}&dirflg=r`;
    return appleUrl;
  };

  // 生成Web版高德地图链接（备用）
  const generateWebAmapLink = () => {
    const webUrl = `https://uri.amap.com/navigation?from=${startPoint.lng},${startPoint.lat},${encodeURIComponent(startPoint.name)}&to=${endPoint.lng},${endPoint.lat},${encodeURIComponent(endPoint.name)}&mode=bus`;
    return webUrl;
  };

  // 处理导航链接点击
  const handleNavigation = (type: 'amap' | 'baidu' | 'apple' | 'web') => {
    let url = '';
    
    switch (type) {
      case 'amap':
        url = generateAmapLink();
        break;
      case 'baidu':
        url = generateBaiduLink();
        break;
      case 'apple':
        url = generateAppleLink();
        break;
      case 'web':
        url = generateWebAmapLink();
        break;
    }

    // 尝试打开应用，如果失败则打开Web版本
    if (type !== 'web') {
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      document.body.appendChild(iframe);
      
      // 延迟后移除iframe并尝试打开Web版本
      setTimeout(() => {
        document.body.removeChild(iframe);
        // 如果是移动端且应用未打开，则打开Web版本
        if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
          setTimeout(() => {
            window.open(generateWebAmapLink(), '_blank');
          }, 1000);
        }
      }, 100);
    } else {
      window.open(url, '_blank');
    }
  };

  return (
    <div className={`bg-white rounded-lg shadow-lg p-4 ${className}`}>
      <div className="flex items-center space-x-2 mb-4">
        <Navigation className="text-blue-600" size={20} />
        <h3 className="font-bold text-lg text-gray-800">一键导航</h3>
      </div>
      
      <div className="mb-4 text-sm text-gray-600">
        <div className="flex items-center space-x-2 mb-1">
          <MapPin size={14} className="text-green-600" />
          <span>起点: {startPoint.name}</span>
        </div>
        <div className="flex items-center space-x-2">
          <MapPin size={14} className="text-red-600" />
          <span>终点: {endPoint.name}</span>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-3">
        {/* 高德地图 */}
        <button
          onClick={() => handleNavigation('amap')}
          className="flex items-center justify-center space-x-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-3 rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all duration-200 shadow-md hover:shadow-lg"
        >
          <div className="w-6 h-6 bg-white rounded flex items-center justify-center">
            <span className="text-blue-600 font-bold text-xs">高</span>
          </div>
          <span className="font-medium">高德地图导航</span>
        </button>

        {/* 百度地图 */}
        <button
          onClick={() => handleNavigation('baidu')}
          className="flex items-center justify-center space-x-3 bg-gradient-to-r from-red-500 to-red-600 text-white px-4 py-3 rounded-lg hover:from-red-600 hover:to-red-700 transition-all duration-200 shadow-md hover:shadow-lg"
        >
          <div className="w-6 h-6 bg-white rounded flex items-center justify-center">
            <span className="text-red-600 font-bold text-xs">百</span>
          </div>
          <span className="font-medium">百度地图导航</span>
        </button>

        {/* 苹果地图 */}
        <button
          onClick={() => handleNavigation('apple')}
          className="flex items-center justify-center space-x-3 bg-gradient-to-r from-gray-700 to-gray-800 text-white px-4 py-3 rounded-lg hover:from-gray-800 hover:to-gray-900 transition-all duration-200 shadow-md hover:shadow-lg"
        >
          <Smartphone size={20} />
          <span className="font-medium">苹果地图导航</span>
        </button>

        {/* Web版本备用 */}
        <button
          onClick={() => handleNavigation('web')}
          className="flex items-center justify-center space-x-3 bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-3 rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-md hover:shadow-lg"
        >
          <Navigation size={20} />
          <span className="font-medium">网页版导航</span>
        </button>
      </div>

      <div className="mt-4 text-xs text-gray-500 text-center">
        <p>点击按钮将尝试打开对应的地图应用</p>
        <p>如果应用未安装，将自动打开网页版本</p>
      </div>
    </div>
  );
};

export default NavigationLinks;